<script setup>
import {onMounted, ref} from 'vue';
import axios from '../request.js';
import {ElMessage} from "element-plus";

const lotteryItems = ref([]);
const lottertyItemId = ref()
const isShowEdit = ref(false);
const isShowDelete = ref(false);
const isShowAdd = ref(false);
const lotteryRecords = ref([]);
const editLotteryItem = ref({
  lotteryItemsId: '',
  title: '',
  probability: '',
  description: '',
  value: '',
  number: '',
  type: '',
  status: '',
});

const addLotteryItem = ref({
  lotteryItemsId: '',
  title: '',
  probability: '',
  description: '',
  value: '',
  number: '',
  type: '',
  status: '',
});

const count = ref(3)
const loading = ref(false)
const noMore = ref(false)

onMounted(() => {
  getLotteryItems();
})
//获取抽奖列表
const getLotteryItems = () => {
  axios.get("/points/getLotteryItems").then(resp => {
    lotteryItems.value = resp.date;
  })
}

//修改奖品
const changeLotteryItem = (id) => {
  isShowEdit.value = true;
  lottertyItemId.value = id;
}
//确认修改奖品信息
const changeLotteryItemYes = () => {
  isShowEdit.value = false;
  editLotteryItem.value.lotteryItemsId = lottertyItemId.value;
  axios.put("/pointsManager/changeLotteryItem", editLotteryItem.value).then(resp => {
    if (resp.code === 200) {
      ElMessage.success("修改成功")
    } else {
      ElMessage.error("修改失败")
    }
    getLotteryItems();

  })
}

//删除奖品
const deleteLotteryItem = (id) => {
  lottertyItemId.value = id;
  isShowDelete.value = true;
}
//确认删除奖品
const deleteLotteryItemYes = () => {
  isShowDelete.value = false;
  axios.post("/pointsManager/deleteLotteryItem", null, {
    params: {
      lottertyItemId: lottertyItemId.value
    }
  }).then(resp => {
    if (resp.code === 200) {
      ElMessage.success("删除成功")
    } else {
      ElMessage.error("删除失败")
    }
    getLotteryItems();
  })
}

//确认增加奖品
const addLotteryItemYes = () => {
  isShowAdd.value = false;
  axios.post("/pointsManager/addLotteryItem", addLotteryItem.value).then(resp => {
    if (resp.code === 200) {
      ElMessage.success("增加成功")
    } else {
      ElMessage.error("增加失败")
    }
    getLotteryItems();
  })
}

//获取抽奖历史
const getLotteryRecords = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false

    if (count.value >= lotteryRecords.value.length) {
      noMore.value = true;
    }
  }, 2000)
  axios.get("/points/getLotteryRecords").then(resp => {
    lotteryRecords.value = resp.date;
  })
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="font-size: 18px">管理奖品表</el-header>
      <el-main>
        <el-table :data="lotteryItems" style="width: 100%">
          <el-table-column prop="lotteryItemsId" label="ID" width="50px"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="probability" label="概率"></el-table-column>
          <el-table-column prop="description" label="描述" width="300px"></el-table-column>
          <el-table-column prop="value" label="价值"></el-table-column>
          <el-table-column prop="number" label="数量"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作" width="200px">
            <template #default="scope">
              <el-button @click="changeLotteryItem(scope.row.lotteryItemsId)" type="primary" plain>编辑</el-button>
              <el-button @click="deleteLotteryItem(scope.row.lotteryItemsId)" type="danger" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="isShowEdit" title="请输入要修改的内容" width="500">
          <el-form>
            <el-form-item label="标题">
              <el-input v-model="editLotteryItem.title" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="概率">
              <el-input v-model="editLotteryItem.probability" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="editLotteryItem.description" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="价值">
              <el-input v-model="editLotteryItem.value" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="editLotteryItem.number" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="editLotteryItem.type" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="editLotteryItem.status" autocomplete="off"/>
            </el-form-item>
          </el-form>
          <span style="color:#d82121;">！！请填入你要修改部分的内容，不修改的可以不填</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="isShowEdit=false">取消</el-button>
              <el-button type="primary" @click="changeLotteryItemYes()">确认</el-button>
            </div>
          </template>
        </el-dialog>

        <el-dialog v-model="isShowDelete" title="删除奖品" width="500">
          <span style="color:#d82121;">注意！！删除后无法恢复，请谨慎操作！！！</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="isShowDelete=false">取消</el-button>
              <el-button type="primary" @click="deleteLotteryItemYes">确认</el-button>
            </div>
          </template>
        </el-dialog>

        <el-button @click="isShowAdd = true" type="primary" style="margin-top: 20px;">新增奖品</el-button>
        <el-dialog v-model="isShowAdd" title="新增奖品">
          <el-form>
            <el-form-item label="ID">
              <el-input v-model="addLotteryItem.lotteryItemsId" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="addLotteryItem.title" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="概率">
              <el-input v-model="addLotteryItem.probability" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="addLotteryItem.description" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="价值">
              <el-input v-model="addLotteryItem.value" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="addLotteryItem.number" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="addLotteryItem.type" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="addLotteryItem.status" autocomplete="off"/>
            </el-form-item>
            <span style="color:#d82121;">注意，奖品ID不能重复！！！</span>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="isShowAdd = false">取消</el-button>
              <el-button @click="addLotteryItemYes" type="primary">保存</el-button>
            </div>
          </template>
        </el-dialog>

        <br><el-button @click="getLotteryRecords" type="primary" style="margin-top: 20px;">抽奖历史</el-button>
        <div class="infinite-list-wrapper" style="overflow: auto">
          <li v-for="(item, index) in lotteryRecords" :key="index" class="list-item">
            <span>{{ item.username }} 抽奖，获得了{{ item.lotteryItemsTitle }}。日期：{{ item.date }}</span>
          </li>
          <p v-if="loading">Loading....</p>
          <p v-if="noMore">No more</p>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  padding: 20px;
}

.infinite-list-wrapper {
  margin-top: 30px;
  width: 600px;
  height: 300px;
  text-align: center;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}

.list-item span{
  margin: 0 15px 0 15px;
}

</style>